<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发票管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-blue-500 to-indigo-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-finance.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">发票管理</h1>
                <i class="fas fa-plus text-lg cursor-pointer" onclick="applyInvoice()"></i>
            </div>
        </div>

        <!-- Stats -->
        <div class="px-4 py-3 bg-gradient-to-r from-blue-500 to-indigo-500">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3">
                <div class="grid grid-cols-3 gap-3 text-white text-center">
                    <div>
                        <p class="text-lg font-bold">156</p>
                        <p class="text-xs opacity-80">已开发票</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">12</p>
                        <p class="text-xs opacity-80">待开发票</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">¥286K</p>
                        <p class="text-xs opacity-80">开票金额</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab Navigation -->
        <div class="px-4 py-2 bg-white border-b border-gray-200">
            <div class="flex space-x-4">
                <button class="pb-2 border-b-2 border-blue-500 text-blue-500 font-medium text-sm">
                    全部发票(168)
                </button>
                <button class="pb-2 text-gray-500 text-sm">
                    待开票(12)
                </button>
                <button class="pb-2 text-gray-500 text-sm">
                    已开票(156)
                </button>
            </div>
        </div>

        <!-- Invoice List -->
        <div class="h-[calc(852px-280px)] overflow-y-auto pb-24">
            <div class="p-4">
                <!-- Invoice Item 1 -->
                <div class="bg-white rounded-lg border border-gray-200 p-4 mb-3 shadow-sm">
                    <div class="flex items-center justify-between mb-3">
                        <div>
                            <p class="text-sm font-medium">普通发票</p>
                            <p class="text-xs text-gray-500">发票号: 12345678901234567890</p>
                        </div>
                        <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已开票</span>
                    </div>
                    
                    <div class="border-t border-gray-100 pt-3">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-xs text-gray-600">开票金额</span>
                            <span class="text-sm font-bold text-blue-600">¥12,580</span>
                        </div>
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-xs text-gray-600">开票日期</span>
                            <span class="text-xs text-gray-700">2025-01-05</span>
                        </div>
                        <div class="flex justify-between items-center mb-3">
                            <span class="text-xs text-gray-600">购买方</span>
                            <span class="text-xs text-gray-700">北京科技有限公司</span>
                        </div>
                        
                        <div class="flex space-x-2">
                            <button class="flex-1 bg-blue-50 text-blue-600 text-xs py-2 rounded-lg border border-blue-200">
                                <i class="fas fa-eye mr-1"></i>查看
                            </button>
                            <button class="flex-1 bg-green-50 text-green-600 text-xs py-2 rounded-lg border border-green-200">
                                <i class="fas fa-download mr-1"></i>下载
                            </button>
                            <button class="flex-1 bg-gray-50 text-gray-600 text-xs py-2 rounded-lg border border-gray-200">
                                <i class="fas fa-share mr-1"></i>发送
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Invoice Item 2 -->
                <div class="bg-white rounded-lg border border-gray-200 p-4 mb-3 shadow-sm">
                    <div class="flex items-center justify-between mb-3">
                        <div>
                            <p class="text-sm font-medium">增值税专用发票</p>
                            <p class="text-xs text-gray-500">申请编号: INV202501050002</p>
                        </div>
                        <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded-full">待开票</span>
                    </div>
                    
                    <div class="border-t border-gray-100 pt-3">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-xs text-gray-600">申请金额</span>
                            <span class="text-sm font-bold text-orange-600">¥8,750</span>
                        </div>
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-xs text-gray-600">申请时间</span>
                            <span class="text-xs text-gray-700">2025-01-04</span>
                        </div>
                        <div class="flex justify-between items-center mb-3">
                            <span class="text-xs text-gray-600">购买方</span>
                            <span class="text-xs text-gray-700">上海贸易公司</span>
                        </div>
                        
                        <div class="flex space-x-2">
                            <button class="flex-1 bg-orange-50 text-orange-600 text-xs py-2 rounded-lg border border-orange-200">
                                <i class="fas fa-edit mr-1"></i>编辑
                            </button>
                            <button class="flex-1 bg-blue-50 text-blue-600 text-xs py-2 rounded-lg border border-blue-200">
                                <i class="fas fa-paper-plane mr-1"></i>提交开票
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Invoice Item 3 -->
                <div class="bg-white rounded-lg border border-gray-200 p-4 mb-3 shadow-sm">
                    <div class="flex items-center justify-between mb-3">
                        <div>
                            <p class="text-sm font-medium">普通发票</p>
                            <p class="text-xs text-gray-500">发票号: 98765432109876543210</p>
                        </div>
                        <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已开票</span>
                    </div>
                    
                    <div class="border-t border-gray-100 pt-3">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-xs text-gray-600">开票金额</span>
                            <span class="text-sm font-bold text-blue-600">¥5,960</span>
                        </div>
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-xs text-gray-600">开票日期</span>
                            <span class="text-xs text-gray-700">2025-01-03</span>
                        </div>
                        <div class="flex justify-between items-center mb-3">
                            <span class="text-xs text-gray-600">购买方</span>
                            <span class="text-xs text-gray-700">深圳电子科技公司</span>
                        </div>
                        
                        <div class="flex space-x-2">
                            <button class="flex-1 bg-blue-50 text-blue-600 text-xs py-2 rounded-lg border border-blue-200">
                                <i class="fas fa-eye mr-1"></i>查看
                            </button>
                            <button class="flex-1 bg-green-50 text-green-600 text-xs py-2 rounded-lg border border-green-200">
                                <i class="fas fa-download mr-1"></i>下载
                            </button>
                            <button class="flex-1 bg-gray-50 text-gray-600 text-xs py-2 rounded-lg border border-gray-200">
                                <i class="fas fa-share mr-1"></i>发送
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Add Invoice Button -->
                <div class="mt-6">
                    <button onclick="addInvoice()" class="w-full bg-gradient-to-r from-blue-500 to-indigo-500 text-white font-medium py-3 rounded-lg shadow-sm">
                        <i class="fas fa-plus mr-2"></i>申请开票
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Navigation functions
        function applyInvoice() {
            window.location.href = 'invoice-apply.html';
        }

        function addInvoice() {
            window.location.href = 'invoice-apply.html';
        }

        function viewInvoice(invoiceId) {
            window.location.href = `invoice-detail.html?id=${invoiceId}&type=completed`;
        }

        function editInvoice(invoiceId) {
            window.location.href = `invoice-edit.html?id=${invoiceId}`;
        }

        function submitInvoice(invoiceId) {
            window.location.href = `invoice-submit.html?id=${invoiceId}`;
        }

        function downloadInvoice(invoiceId) {
            showToast('正在生成发票PDF...');
            // Simulate download delay
            setTimeout(() => {
                showToast('发票PDF已下载');
            }, 2000);
        }

        function sendInvoice(invoiceId) {
            if (confirm('将发票发送到客户邮箱？\n\n确认后系统将自动发送发票到客户登记的邮箱地址。')) {
                showToast('发票发送成功！');
            }
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Tab switching
        document.addEventListener('DOMContentLoaded', function() {
            const tabButtons = document.querySelectorAll('.flex.space-x-4 button');
            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除其他按钮的激活状态
                    tabButtons.forEach(btn => {
                        btn.classList.remove('border-b-2', 'border-blue-500', 'text-blue-500', 'font-medium');
                        btn.classList.add('text-gray-500');
                    });
                    
                    // 激活当前按钮
                    this.classList.remove('text-gray-500');
                    this.classList.add('border-b-2', 'border-blue-500', 'text-blue-500', 'font-medium');
                });
            });

            // Add click handlers to buttons that don't have onclick attributes
            document.querySelectorAll('button').forEach(btn => {
                if (!btn.hasAttribute('onclick')) {
                    if (btn.textContent.includes('查看')) {
                        // Get invoice ID from context
                        const invoiceBlock = btn.closest('.bg-white');
                        const invoiceIdElement = invoiceBlock.querySelector('.text-xs.text-gray-500');
                        let invoiceId = 'unknown';
                        if (invoiceIdElement && invoiceIdElement.textContent.includes('发票号:')) {
                            invoiceId = invoiceIdElement.textContent.replace('发票号: ', '').trim();
                        }
                        btn.onclick = () => viewInvoice(invoiceId);
                    } else if (btn.textContent.includes('下载')) {
                        const invoiceBlock = btn.closest('.bg-white');
                        const invoiceIdElement = invoiceBlock.querySelector('.text-xs.text-gray-500');
                        let invoiceId = 'unknown';
                        if (invoiceIdElement && invoiceIdElement.textContent.includes('发票号:')) {
                            invoiceId = invoiceIdElement.textContent.replace('发票号: ', '').trim();
                        }
                        btn.onclick = () => downloadInvoice(invoiceId);
                    } else if (btn.textContent.includes('发送')) {
                        const invoiceBlock = btn.closest('.bg-white');
                        const invoiceIdElement = invoiceBlock.querySelector('.text-xs.text-gray-500');
                        let invoiceId = 'unknown';
                        if (invoiceIdElement && invoiceIdElement.textContent.includes('发票号:')) {
                            invoiceId = invoiceIdElement.textContent.replace('发票号: ', '').trim();
                        }
                        btn.onclick = () => sendInvoice(invoiceId);
                    } else if (btn.textContent.includes('编辑')) {
                        const invoiceBlock = btn.closest('.bg-white');
                        const invoiceIdElement = invoiceBlock.querySelector('.text-xs.text-gray-500');
                        let invoiceId = 'unknown';
                        if (invoiceIdElement && invoiceIdElement.textContent.includes('申请编号:')) {
                            invoiceId = invoiceIdElement.textContent.replace('申请编号: ', '').trim();
                        }
                        btn.onclick = () => editInvoice(invoiceId);
                    } else if (btn.textContent.includes('提交开票')) {
                        const invoiceBlock = btn.closest('.bg-white');
                        const invoiceIdElement = invoiceBlock.querySelector('.text-xs.text-gray-500');
                        let invoiceId = 'unknown';
                        if (invoiceIdElement && invoiceIdElement.textContent.includes('申请编号:')) {
                            invoiceId = invoiceIdElement.textContent.replace('申请编号: ', '').trim();
                        }
                        btn.onclick = () => submitInvoice(invoiceId);
                    }
                }
            });
        });
    </script>
</body>
</html>